var OrderDetail = function () {
  var template = /*html*/ `
    <div class="order-detail" style="padding: 0 20px;padding-bottom: 10px;" v-loading.fullscreen.lock="loading">
      <div class="detailTable">
        <el-table fit stripe border :data="detailList" style="width: 100%" :row-class-name="orderRowClassName">
          <el-table-column :resizable="false" prop="companyOrderId" label="订单编号" :auto-width="true" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="factoryId" label="工厂型号" :auto-width="true" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="coustomId" label="客户型号" :auto-width="true" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="coustomOrderId" label="客户订单号" :auto-width="true" min-width="90px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="supplierName" label="供应商" :auto-width="true" min-width="70px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="technology" label="加工工艺" :auto-width="true" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="flowCycle" label="流程周期" min-width="80px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="maching" label="加工对象" :auto-width="true" min-width="80px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="color" label="颜色" :auto-width="true" min-width="70px" header-align="center">
            <template slot-scope="props">
              <span v-if="props.row.hasEle">
                {{props.row.additionalColor}}({{props.row.additionalMaterialType}})
              </span>
              <span v-else>{{props.row.color}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="model" label="规格" :auto-width="true" min-width="70px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="count" label="外协数量" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="unitPrice" label="单价" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="计价数量" min-width="100px" align="center">
            <template slot-scope="props">
              <span>{{props.row.valuationCount}}{{props.row.valuationUint}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="totalPrice" label="合计" min-width="100px" align="center"></el-table-column>
          <!--<el-table-column :resizable="false" prop="actualPrice" label="实际价格" min-width="100px" align="center"></el-table-column>-->
          <el-table-column :resizable="false" prop="remark" label="备注" width="151px" show-overflow-tooltip header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="是否完成" min-width="80px" align="center">
            <template slot-scope="props">
              <span>{{props.row.isFinish===2?'未完成':'完成'}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="完成时间" width="100px" align="center">
            <template slot-scope="props">
              <span v-if="props.row.isFinish!==2&&props.row.returenTime!==''">{{moment(props.row.returenTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="returnCount" label="完成数量" min-width="100px" align="center"></el-table-column>
          <el-table-column :resizable="false" prop="valuationCount" label="完成计价数量" min-width="100px" align="center">
            <template slot-scope="props">
              <span>{{props.row.valuationCount}} {{props.row.valuationUint}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="制单时间" width="100px" align="center">
            <template slot-scope="props">
              <span v-if="props.row.createTime!==''">{{moment(props.row.createTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="createUser" label="制单人" :auto-width="true" min-width="70px"></el-table-column>
          <el-table-column :resizable="false" label="状态" min-width="100px" align="center">
            <template slot-scope="props">
              <span>{{getStatus(props.row)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="可审核人" min-width="100px;" :auto-width="true" header-align="center">
            <template slot-scope="scope">
              <span v-for="name in scope.row.approvalNameList" :key="name">{{name}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="approvalUser" label="审核人" :auto-width="true" min-width="70px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="审核时间" min-width="100px" align="center">
            <template slot-scope="props">
              <span v-if="props.row.approvalTime!==''">{{moment(props.row.approvalTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  `;

  return {
    props: {
      order: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        detailList: [],
        moment: moment
      };
    },

    created: function () {
      this.setDetailList();
    },

    methods: {
      setDetailList: function () {
        var order = this.order;
        this.loading = true;
        var self = this;
        ajaxRequest('putOutNew/getPutOutDetailByTypeId', {
          typeId: order.typeId
        }).then(function (res) {
          var detailList = res.returnData;
          for (var i = 0; i < detailList.length; i++) {
            var detail = detailList[i];

            order.returenTime = SysUtil.formatString2Date(order.returenTime);
            order.approvalTime = SysUtil.formatString2Date(order.approvalTime);
            order.createTime = moment(order.createTime).valueOf();

            var valuationCount = order.valuationCount;
            valuationCount = Number(valuationCount);
            order.valuationCount = valuationCount;
            var unitPrice = detail.unitPrice;
            detail.totalPrice = _.round(valuationCount * unitPrice, 2);

            var returnValuationCount = detail.returnValuationCount;
            if (returnValuationCount === null) {
              detail.returnValuationCount = detail.returnCount;
            }

            detail.hasEle = detail.additionalMaterialType !== '';
          }
          self.detailList = detailList;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      orderRowClassName: function (props) {
        var order = props.row;
        var isFinish = order.isFinish;
        var createTime = order.createTime;
        var flowCycle = order.flowCycle;

        var timeMoment = moment(createTime).add(flowCycle, 'day');
        var now;
        if (isFinish === 2) {
          now = moment();
        } else {
          var returenTime = order.returenTime;
          if (returenTime === '') {
            return '';
          }
          now = moment(returenTime);
        }
        if (moment(timeMoment).isBefore(now, 'day')) {
          return 'out-time';
        }

        if (moment(timeMoment).isSame(now, 'day') && isFinish === 2) {
          return 'out-time';
        }
        return '';
      },

      getStatus: function (detail) {
        var status = detail.status;
        var statusList = ['未审核', '已审核', '退回'];
        return statusList[status];
      }
    },

    template: template
  };
}();